<template>
  <div id="PriceChange">
     
    <el-form :inline="true" class="filter-form">
        <div style="width:700px">
      <el-form-item label="变更日期">
        <el-date-picker
          v-model="filter.dateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      
      <el-form-item label="商品">
        <el-select v-model="filter.product" placeholder="请选择商品">
          <el-option label="商品A" value="A"></el-option>
          <el-option label="商品B" value="B"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="变更来源">
        <el-select v-model="filter.source" placeholder="请选择来源">
          <el-option label="购货单调价" value="purchase_order_adjustment"></el-option>
<el-option label="购货订单调价" value="purchase_order_adjustment_order"></el-option>
<el-option label="购货单自动变价" value="purchase_order_auto_adjustment"></el-option>
<el-option label="商品价格本" value="product_price_book"></el-option>
        </el-select>
      </el-form-item>
      </div>
      <div >
      <el-form-item label="商品类别">
  <el-cascader
    :options="categoryTreeData"
    show-checkbox
    :props="cascaderProps"
    v-model="selectedCategory"
    @change="handleCategoryChange"
    placeholder="请选择"
  ></el-cascader>
</el-form-item>
      
      <el-form-item label="业务员">
        <el-select v-model="filter.salesperson" placeholder="请选择业务员">
          <el-option label="业务员A" value="A"></el-option>
          <el-option label="业务员B" value="B"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="价格类型">
        <el-select v-model="filter.priceType" placeholder="请选择价格类型">
          <el-option label="类型1" value="1"></el-option>
          <el-option label="类型2" value="2"></el-option>
        </el-select>
      </el-form-item>
      </div>
      <el-form-item style="width:200px">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="商品编号" width="180"></el-table-column>
      <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
      <el-table-column prop="source" label="变更来源" width="180"></el-table-column>
      <el-table-column prop="changeTime" label="变更时间" width="180"></el-table-column>
      <el-table-column prop="salesperson" label="业务员" width="180"></el-table-column>
      <el-table-column prop="priceType" label="价格类型" width="180"></el-table-column>
      <el-table-column prop="afterChange" label="变更后" width="180"></el-table-column>
      <el-table-column prop="beforeChange" label="变更前" width="180"></el-table-column>
      <el-table-column prop="remarks" label="备注" width="180"></el-table-column>
      <el-table-column prop="creator" label="创建人" width="180"></el-table-column>
    </el-table>
    <el-pagination
  @current-change="handlePageChange"
  :current-page.sync="currentPage"
  :page-sizes="[50]"
  :page-size="50"
  layout="total, prev, pager, next, jumper, ->, sizes, ->"
  :total="totalItems"
>
</el-pagination>
  </div>
</template>
<script>


export default {
  name:'PriceChange',
  data() {
    return {
      filter: {
        dateRange: [],
        product: '',
        sources: [],
        category: '',
        salesperson: '',
        priceType: ''
      },
      currentPage: 1,
    totalItems: 0,
      tableData: [],
      categoryTreeData: [
        {
          label: '全部',
          children: [
            {
              label: '茶',
              children: [
                { label: '绿茶' }
              ]
            },
            {
              label: '酒类',
              children: [
                { label: '红酒' },
                { label: '国产' }
              ]
            }
          ]
        }
      ],
      selectedCategory: []
    };
  },
  methods: {
    search() {
      this.fetchData();
    },
    reset() {
      this.filter = {
        dateRange: [],
        product: '',
        sources: [],
        category: '',
        salesperson: '',
        priceType: ''
      };
      this.selectedCategory = [];
    },
    fetchData() {
      let sources = this.filter.sources;
      if (sources.includes('all')) {
        sources = ['purchase_order_adjustment', 'purchase_order_adjustment_order', 'purchase_order_auto_adjustment', 'product_price_book'];
      }
      
      const params = {
        startDate: this.filter.dateRange[0],
        endDate: this.filter.dateRange[1],
        product: this.filter.product,
        sources: sources.join(','),
        category: this.selectedCategory.join(','),
        salesperson: this.filter.salesperson,
        priceType: this.filter.priceType
      };
      
    },
    handleCategoryChange(node, checked, indeterminate) {
      if (checked) {
        this.selectedCategory.push(node.label);
      } else {
        const index = this.selectedCategory.indexOf(node.label);
        if (index > -1) {
          this.selectedCategory.splice(index, 1);
        }
      }
    }
  }
};
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}
.title {
  font-size: 24px; /* 根据需要调整大小 */
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
  bottom: 50px; /* 添加一些底部边距 */
}
</style>